<template>
  <div class="mainCon">
    <div class="mainCon">
      <div class="containercontent">
        <div class="selectw100 seachTip">
          <div class="inlineblock verticalmiddle infoitem">
            <div class="inlineblock verticalmiddle">
              分包商
            </div>
            <div class="inlineblock verticalmiddle informationItem">
              <el-select v-model="subcontractorValue" size="mini" filterable remote :remote-method="readAllSubcontractor" @change="doSearch">
                <el-option v-for="item in subcontractorTable" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>

          <div class="inlineblock verticalmiddle infoitem">
            <div class="inlineblock verticalmiddle">
              起止时间
            </div>
            <div class="inlineblock verticalmiddle informationItem">
              <el-date-picker v-model="batchcreatetime" size="mini" type="daterange" unlink-panels range-separator="-" value-format="yyyy-MM-dd"
                start-placeholder="开始日期" end-placeholder="结束日期" @change="doSearch">
              </el-date-picker>
            </div>
          </div>
          <div class="inlineblock verticalmiddle infoitem">
            <div class="inlineblock verticalmiddle">
              任 务
            </div>
            <div class="inlineblock verticalmiddle informationItem">
              <!--readAllTask-->
              <el-select v-model="taskArrValue" size="mini" filterable remote :remote-method="readAllTask" @change="doSearch">
                <el-option v-for="item in taskArr" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="inlineblock basicRightDistanceA searchIcon">
            <el-button size="mini" @click="doSearch">搜索</el-button>
            <el-button size="mini" @click="emptySearch">清空</el-button>
            <!--<el-button icon="el-icon-search" size="mini" @click="readSubcontractorRecord(subcontratorRecordQuery)"></el-button>-->
          </div>
        </div>
        <div class="separaterowTable">
          <div class="tableTittle">
            <div><span class="fontImpact">1</span><span>分包记录</span></div>
            <!--<el-button type="primary" icon="el-icon-plus" size="mini" @click="addsubcontractor" style="float:right">添加分包商</el-button>-->
          </div>
          <el-table :data="subcontractorRecord" style="width: 100%" size="mini" class="tableCon">
            <el-table-column label="序号" min-width="50px">
              <template slot-scope="scope">
                {{scope.$index+(subcontratorRecordQuery.page - 1) * subcontratorRecordQuery.pageCount + 1}}
              </template>
            </el-table-column>
            <el-table-column property="taskName" label="任务" min-width="150px">
            </el-table-column>
            <el-table-column property="subcontractorName" label="分包商" min-width="100px" show-overflow-tooltip>
            </el-table-column>
            <el-table-column property="createTime" label="分包日期" :formatter='formatterDate' min-width="100px">
            </el-table-column>
            <el-table-column label="操作" min-width="120px" v-if = "userOpernation.select.display">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="taskDetail(scope.row)" >详细信息</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block changepages">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="subcontratorRecordQuery.page"
              :page-sizes="[20,30,40]" :page-size="subcontratorRecordQuery.pageCount" layout="total, sizes, prev, pager, next, jumper"
              :total="rowNumber">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <div v-if="taskDetailShow" class="taskPop">
      <div class="twoStageWindow">
        <div class="twoStageWindowTitle">
          分包详情<span style = "font-size:13px;margin-left:8px">{{taskTitle}}</span>
          <div class="twoStageWindowClose">
            <el-button size="mini" v-on:click="close">取消</el-button>
          </div>
        </div>
        <div class="containercontent" style="margin-top:40px;height:calc(100% - 40px);padding-top: 0;">
          <div class="suppad20">
            <div class="supTitle">
              分包样品
            </div>
            <el-table :data="monitorPoints" style="width: 100%;height:calc(100% - 40px)"  size="mini" highlight-current-row @current-change="handleSelectionChange"
              class="table tableCon" ref = "multipleTable">
              <el-table-column min-width="80px" label="序号">
                <template slot-scope="scope">
                  {{scope.$index+1}}
                </template>
              </el-table-column>
              <el-table-column property="code" label="样品编号" min-width="120px">
              </el-table-column>
              <el-table-column min-width="120px" property="name" label="样品名称" show-overflow-tooltip>
              </el-table-column>
              <el-table-column min-width="120px" property="qcTypeName" label="QC类型" :formatter="qcTypeFormatter">
              </el-table-column>
              <el-table-column property="taskName" label="任务" min-width="150px">
              </el-table-column>
              <el-table-column property="createTime" label="分包日期" :formatter='formatterDate' min-width="100px">
              </el-table-column>

             
            </el-table>
          </div>
          <div class="suppad20">
            <div class="supTitle">
              {{sampleName}}
            </div>
            <el-table :data="itemData" style="width: 100%;height:calc(100% - 40px);" class="tableCon" size="mini" highlight-current-row>
              <el-table-column min-width="38px" label="序号">
                <template slot-scope="scope">
                  {{scope.$index+1}}
                </template>
              </el-table-column>
              <el-table-column property="itemName" label="检测项目" min-width="120px" show-overflow-tooltip>
              </el-table-column>
              <el-table-column property="detectabilityName" min-width="120px" label="能力参数" show-overflow-tooltip>
              </el-table-column>
              <el-table-column min-width="120px" property="methodName" label="检测方法" show-overflow-tooltip>
              </el-table-column>


            </el-table>
          </div>



        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  

  export default {
    data() {
      return {
        subcontractorRecord: [], //分包记录列表数据
        
        subcontratorRecordQuery: {
          page: 1, //第几页
          pageCount: 20, //页面得记录条数，
        },
        rowNumber: 0,
        subcontractorValue: '', //搜索栏分包商值
        taskArrValue: '',
        searchName: '',
        batchcreatetime: '', //搜索栏时间
        monitorPoints: [],  //详情分包样品数据
        itemData: [], //详情分包项目数据
        sampleName: '', //样品名称
        taskTitle: '',
        subcontractor: '', //分包商id
        taskArr: [],//搜索栏任务数据
        subcontractorTable: [], //搜索栏分包商数据
        taskDetailShow: false, //详情弹框

        //截止日期可选范围
        pickerenddatefanwei: {
          disabledDate: function (time) {
            let timeSpace = time.getTime() < new Date((that.batchcreatetimestart ? that.batchcreatetimestart : '1970-01-01')).getTime();
            return timeSpace;
          }
        },
      }
    },
    props:["userOpernation"],
    components: {
      
    },
    computed: {
      ...mapState(['enableStatus', 'typeQcSelect', 'sampleType']),
      sampleTypeTable() {
        let that = this;
        return that.$common.objToArr(that.sampleType);
      }
    },
    mounted() {
      this.readSubcontractorRecord(this.subcontratorRecordQuery);
      this.readAllSubcontractor();
      this.readAllTask()
    },
    watch: {
      //当开始日期改变时，改变结束日期不可选日期部分
      batchcreatetimestart: function (val) {
        if (this.batchcreatetimestart > this.batchcreatetimeend && this.batchcreatetimeend) {
          //起始日期大于结束日期  且  结束日期不为null      结束=开始
          this.batchcreatetimeend = this.batchcreatetimestart
        } else if (this.batchcreatetimestart > this.batchcreatetimeend && !this.batchcreatetimeend) {
          //起始日期大于结束日期  且  结束日期为null      此时不用重新给结束日期赋值
        } else if (this.batchcreatetimestart == this.batchcreatetimeend) {
          //起始日期等于结束日期        此时不用赋值
        } else {
          //起始日期小于结束日期，更新结束日期的绑定值，目的：刷新结束日期插件可选日期
          let zancun = this.batchcreatetimeend;
          this.batchcreatetimeend = new Date(this.batchcreatetimeend);
        }
      },
      subcontratorRecordQuery: {
        handler(val, oldVal) {
          this.readSubcontractorRecord(this.subcontratorRecordQuery)
        },
        deep: true
      },
    },
    methods: {
      qcTypeFormatter(row, column, cellValue, index){
        return this.util.codeChangeName({ cellValue: cellValue, list: this.typeQcSelect.itemList })
      },
      emptySearch() {
        this.subcontractorValue = '';
        this.batchcreatetime = [];
        this.taskArrValue = '';
        this.readSubcontractorRecord(this.subcontratorRecordQuery)
      },
      doSearch(){
        this.subcontratorRecordQuery.page = 1;
         this.readSubcontractorRecord(this.subcontratorRecordQuery)
      },
      //搜索栏搜索分包商下拉框
      readAllSubcontractor(item) {
        this.$http({
          method: 'post',
          apiUrl: '/resource/readAllSubcontractor.htm',
          params: { name: item },
          isJson: false
        }).then(res => {
          if (res.code === 0) {
            console.log(res.data)
            this.subcontractorTable = res.data;
          }
        })
      },
      // 搜索栏搜索任务下拉框
      readAllTask(item) {
        this.$http({
          method: 'post',
          apiUrl: '/detection/readAllTask.htm',
          params: { name: item },
          isJson: false
        }).then(res => {
          if (res.code === 0) {
            this.taskArr = res.data
            // this.itemData = res.data;
          } 

        })
      },
      // /读取分包记录列表
      readSubcontractorRecord(parp) {
        var params = {
          subcontractor: this.subcontractorValue,
          bTime: this.batchcreatetime[0],
          eTime: this.batchcreatetime[1],
          page: parp.page,
          pageCount: parp.pageCount,
          task: this.taskArrValue,
        }
        this.$http({
          method: 'post',
          apiUrl: '/resource/readSubcontractorRecordList.htm',
          params: params,
          isJson: true,
        }).then(res => {
          if (res.code == 0) {
            this.subcontractorRecord = res.data;
            if (!res.pageinfo) {
              this.rowNumber = 0;
            } else if (res.pageinfo && !res.pageinfo.rowNumber) {
              this.rowNumber = 0;
            } else {
              this.rowNumber = res.pageinfo.rowNumber;
            }
          }

        })
      },
      // 处理分包日期
      formatterDate(row, column, cellValue) {
        return this.util.formatterDate({ cellValue: cellValue })
      },
      // 查看详情
      taskDetail(row) {
        console.log(row)
        this.taskDetailShow = true;
        this.taskTitle = row.subcontractorName;
        this.subcontractor = row.subcontractor
        this.$http({
          method: 'post',
          apiUrl: '/resource/readSubcontractorRecord.htm',
          params: { subcontractor: row.subcontractor,task:row.task },
          isJson: false,
        }).then(res => {
          if (res.code === 0) {
            this.monitorPoints = res.data;
             this.$nextTick(() => { 
                 this.$refs.multipleTable.setCurrentRow(this.$refs.multipleTable.data[0])
                 this.handleSelectionChange(res.data[0])
            })
           

          } 

        })
      },
      // 点击分包样品列表 展示分包项目
      handleSelectionChange(row) {

        this.sampleName = row.name;
        var data = {
          subcontractor: this.subcontractor,
          sample: row.code
        };
        this.$http({
          method: 'post',
          apiUrl: '/resource/readSubcontractorTaskItem.htm',
          params: data,
          isJson: false,
        }).then(res => {
          if (res.code === 0) {
            this.itemData = res.data;
          } 

        })
      },
      close() {
        this.taskDetailShow = false;
      },
      // 分页 每一页显示几条数据
      handleSizeChange: function (val) {
        this.subcontratorRecordQuery.pageCount = val;
      },
      // 分页 当前第几页
      handleCurrentChange: function (val) {
        this.subcontratorRecordQuery.page = val;
      },

    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .container>div:nth-of-type(2)>div {
    height: auto;
  }

  .seachTip {}

  .infoitem {
    width: calc((100% - 100px)/4);
    padding: 0;
    margin-right: 5px;
  }

  .informationItem {
    width: calc(100% - 78px);
    float: none;
    margin-left: 8px;
  }

  .taskPop .suppad20 {
    padding: 0 20px;
    height: calc(100%/2);
  }

  .taskPop .supTitle {
    height: 40px;
    line-height: 40px;
  }

  .taskPop .suppad20 .el-table {
    height: calc(100% - 40px)
  }
</style>
<style>
  .taskPop .suppad20 .el-table .el-table__body-wrapper,
  .taskPop .suppad20 .el-table .el-table__fixed-body-wrapper {
    height: calc(100% - 36px)
  }
</style>